<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'showworkFlow.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var count=0;
			//添加步骤事件
			$("#btnAdd").click(function(){
			 	cloneFieldSet();	//复制节点 并初始化
			 	alert(count);
			});
			var initHtml=$("#fieldset").html();
			function cloneFieldSet(){
				$("#fieldset").find("fieldset").first().clone(true).appendTo("#fieldset");	//获取第一个fieldset中复制
				count++;
				step_index++;
			 	//清空数据
			 	init();
			}
			//回到初始化状态   保留第一个fileset 并且清空fileset中的数据
			function filesetInit(){
				//删除
				remvFieldSet(1,step_index,1);
				count=0;	//count计数初始化
				//修改form表单提交URl
				$("#workForm").attr("action","saveworkFlow.action");
				//清空隐藏域
				$("#workForm").find("input:hidden").first().remove();
				step_index=1;
				//清空
				init();
				
			}
			//选择流程
			$("#workSteps").change(function(){
				var work_id=$("#workSteps").find("option:selected").val();
				//判断是否选择请选择
				if(work_id==0){
					//如果是请选择  初始化
					filesetInit();
				}else{
					//修改一下地址
					$("#workForm").attr("action","updateworkFlow.action");
					var hide_length=$("#workForm").find("input:hidden").size();
					if(hide_length==0){
						//如果不存在
						$("#workForm").append("<input type=\"hidden\" name='workflow.id' value='"+work_id+"'/>");
					}else{
						//进行直接赋值
						$("#workForm").find("input:hidden").first().val(work_id);
					}
					//进行插入
					$.ajax({
						url:"workflowStep.action",
						dataType:"json",
						data:"workflow.id="+work_id,
						success:function(data){
							//查询长度
							var oldfieldsetLength=0;
							var searchfieldsetLength=data.workSteps.length;	
							$.each(data.workSteps,function(i,item){
								//加载对应的工作流程步骤
								var fieldset=null;
								if(i==0){
									fieldset=$("#fieldset").find("fieldset").first();
								}else{
									//获取现有长度
									oldfieldsetLength=$("#fieldset").find("fieldset").size();
									if(oldfieldsetLength<searchfieldsetLength){
										//如果少则需要创建节点
										cloneFieldSet();
									}
									//如果多余查询
									if(oldfieldsetLength>searchfieldsetLength&&i==searchfieldsetLength-1){
										//删除
										remvFieldSet(searchfieldsetLength,oldfieldsetLength,0);
									}
									//填充数据
									fieldset=$("#fieldset").find("fieldset").slice(i, i+1);
								}
								paddFieldSet(fieldset,item);
							});
						}
					})
				}
			});
			function remvFieldSet(start,end,type){
				if(type==1){
					$("#fieldset").html(initHtml);
					return;	
				}
				for(i=start;i<end;i++){
					//循环删除
					$("#fieldset").find("fieldset").slice(i,i+1).remove();
					count--;
					step_index--;
				}
			}
			function paddFieldSet(obj,item){
				obj.find(".step_name")[0].value=item.name;
				obj.find(".step_context")[0].innerHTML=item.stepContext;
				obj.find(".step_num")[0].value=item.stepNum;
			}
			
			//删除步骤事件
			$("#butDel").click(function(){
				var length=$("#fieldset").find("fieldset").size();
				if(length<2){
					alert("已不能删除");
					return null;
				}
				if(confirm("你确定要删除吗？")){
					$("#fieldset").children().slice(length-1,length).remove();
				}
				step_index--;
			});
			var step_index=1;
			function init(){
				$("#fieldset").find("fieldset").last().find("input,textarea,legend").each(function(i,item){
					if(item.type=="text"||item.type=="textarea"){
						item.value="";
						item.name=item.name.replace("[0]","["+count+"]");
					}else{
						if(item.tagName=="LEGEND"){
							item.innerHTML="步骤"+(step_index);
						}
					}
				});
			}
			$("#workForm").submit(function(){
				$("#fieldset").find("fieldset").each(function(i,item){
					
				})
				
				return false;
			});
		});
	</script>
	<style type="text/css">
		#workFlowDiv {border:1px red solid; width: 40%;}
		.tb{width: 100%;}
		.lab_name{width: 20%;  text-align: right;font-size: 14px;}
		.lab_type{widows: 70%;  }
		.step_name,.step_num{width: 80%;}
		.step_context{width: 80%; height: 60px;}
		.title{font-size: 16px; font-weight: bolder;}
		#buttonDiv{height: 20px; line-height: 20px;text-align: right;} 
		#buttonDiv .butoption{margin-right: 20px;}
	</style>
  </head>
  
  <body>
  
  		<!-- 加载工作流程 -->
    	<div id="workFlowDiv">
    	<select id="workSteps">
    		<option value="0">请选择</option>
    		<option value="2">部门人员申请流程</option>
    		<option value="3">部门人员报销流程</option>
    	</select>
    	<form action="saveworkFlow.action" method="post" id="workForm">
    		<div id="fieldset">
    		<fieldset>
    			 <legend class="title">步骤1</legend>
    			 <table class="tb">
    			 	<tr>
    			 		<td class="lab_name">步骤名称：</td>
    			 		<td class="lab_type"><input type="text" name="steps[0].name" class="step_name"></td>
    			 	</tr>
    			 	<tr>
    			 		<td class="lab_name">步骤说明：</td>
    			 		<td class="lab_type"><textarea name="steps[0].stepContext" class="step_context"></textarea></td>
    			 	</tr>
    			 	<tr>
    					<td class="lab_name">步骤重复次数：</td>
    					<td class="lab_type"><input type="text" name="steps[0].stepNum" class="step_num"></td>
    				</tr>	
    			 </table>
    		</fieldset>
    		</div>
    		<input type="submit" value="提    交" class="btnSub">	
    	</form>
    	<div id="buttonDiv">
    		<input type="button" class="butoption" id="btnAdd" value="添加步骤">
    		<input type="button" class="butoption" id="butDel" value="删除步骤"/>
    	</div>
    	</div>
  </body>
</html>
